<template>
  <div
    id="musicCollection"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <section v-show="musicList.length != 0">
      <div class="count">
        共<span>{{ count }}</span
        >个收藏
      </div>
      <!-- 音乐收藏 -->
      <table class="table">
        <thead>
          <tr>
            <th>音乐</th>
            <th>创作者</th>
            <th>总使用人数</th>
            <th>热门视频TOP3</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in musicList" :key="'music' + index">
            <td>
              <div class="topic" @click="seeDetails(item.musicId, item)">
                <div class="mlogoBox">
                  <img :src="item.thumPic" />
                  <img src="@/assets/wang/video/musicBg.png" />
                </div>
                <div class="musicTitle">
                  <el-tooltip
                    effect="light"
                    :content="item.title"
                    :hide-after="2000"
                    placement="top"
                    popper-class="mytooltip"
                  >
                    <p>{{ item.title }}</p>
                  </el-tooltip>
                  <p>
                    音乐时长:
                    <span>{{ format_time(item.duration * 1000) }}</span>
                  </p>
                </div>
              </div>
            </td>
            <td>{{ item.author }}</td>
            <td>{{ format_num(item.userCount) }}</td>
            <td>
              <div class="topVideo">
                <div
                  class="videoImgBox"
                  v-for="(item1, index1) in item.hotTop.slice(0, 3)"
                  :key="'v' + index1"
                >
                  <img
                    src="@/assets/wang/video/like.png"
                    class="likeImg"
                    v-if="item1.isCollect == 0"
                    @click="addVideoStar(item1.awemeId, item1)"
                  />
                  <img
                    src="@/assets/wang/video/liked.png"
                    class="likeImg"
                    v-if="item1.isCollect == 1"
                    @click="cancelVideoStar(item1.awemeId, item1)"
                  />
                  <img
                    src="@/assets/wang/video/play1.png"
                    class="playImg"
                    @click="playVideo(item1.url)"
                  />
                  <img :src="item1.thumPic" class="videoImg" />
                  <div class="zanBox">
                    <img src="@/assets/wang/video/zan.png" />
                    <span>{{ format_num(item1.favoriteCount) }}</span>
                  </div>
                  <div class="userInfoMaskWl"></div>
                </div>
              </div>
            </td>
            <td>
              <div class="options">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="音乐详情"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/more.png"
                    @click="seeDetails(item.musicId, item)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="播放"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/play.png"
                    @click="playVideo(item.playUrl)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="取消收藏"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/liked.png"
                    @click="cancelStar(item.musicId, index)"
                  />
                </el-tooltip>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <div
      v-loading="loading"
      v-if="!(musicList.length < (page - 1) * 20)"
      class="loading grayLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p
      class="nothing"
      v-show="musicList.length != 0 && musicList.length < (page - 1) * 20"
    >
      我是有底线的～
    </p>
    <div class="empty addTop" v-show="!loading && musicList.length == 0">
     <img src="@/assets/liu/zw.png" />
      <p>您还未收藏任何内容哦~</p>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="musicDetails"
      :show-close="false"
      v-if="musicDetails"
    >
      <div class="topicDetailsBox">
        <musicDetails
          :musicId="musicId"
          @changeMusicCollect="changeMusicCollect"
          @changeVideoCollect="changeVideoCollect"
        />
      </div>
      <img
        src="@/assets/wang/video/close.png"
        class="closeImg"
        @click="musicDetails = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import musicDetails from "@/pages/wang/video/hotMusic/component/musicDetails";
export default {
  components: {
    musicDetails,
  },
  data() {
    return {
      keyWords: "",
      musicDetails: false,
      musicList: [],
      page: 1,
      busy: false,
      loading: true,
      updateTime: "",
      musicId: "",
      updateTime: new Date(),
      cancel: null,
      cancel01: null,
      cancel02: null,
      cancel03: null,
      count: "",
      musicItem: {},
    };
  },
  computed: {},
  watch: {},
  created() {
    let that = this;
    that.updateTime = that.timestamp(
      that.updateTime.getTime() / 1000,
      "Y-M-D h:m:s"
    );
    this.GetmusicList();
    this.$watch(
      "keyWords",
      that.debounce((newVal, oldVal) => {
        if (newVal == "") {
          that.page = 1;
          that.musicList = [];
          that.GetmusicList();
        }
      }, 0)
    );
  },
  mounted() {},

  methods: {
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/InsertCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏音乐
    cancelStar(id, index) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 3, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.musicList.splice(index, 1);
            that.count--;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    GetmusicList() {
      let that = this;
      that.loading = true;
      that.busy = true;
      that.$axios
        .get(
          "/api/collection/GetMusicCollection",
          {
            params: {
              pageIndex: that.page,
              pageSize: 20,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.page += 1;
            that.musicList = that.musicList.concat(res.data.data);
            that.count = res.data.count;
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
          }
          that.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadMore() {
      // 只显示前1500条数据 到最后一页时（即最后一页请求的数据不足50条）不再继续请求
      // if (this.page == 31) {
      //   return false
      // }
      this.GetmusicList();
    },
    toSearch() {
      if (this.keyWords != "") {
        this.page = 1;
        this.musicList = [];
        this.GetmusicList();
      }
    },
    seeDetails(musicId, item) {
      this.musicId = musicId;
      this.musicItem = item;
      this.musicDetails = true;
    },
    playVideo(url) {
      window.open(url);
    },
    // 添加视频收藏
    addVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/InsertCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏视频
    cancelVideoStar(id, item) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 2, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 在详情中收藏了音乐
    changeMusicCollect(isCollect) {
      // console.log('改变收藏')
      this.musicItem.isCollect = isCollect;
    },
    // 在详情中收藏了视频
    changeVideoCollect(isCollect, id) {
      // console.log('改变收藏视频')
      this.musicItem.hotTop.map((item) => {
        if (item.awemeId == id) {
          item.isCollect = isCollect;
          console.log;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
#musicCollection {
  height: fit-content;
  min-height: 100vh;
  .addTop {
    margin-top: 150px;
  }
  .count {
    padding-top: 20px;
    color: #888;
    font-size: 14px;
    span {
      color: #fd7f2c;
      font-family: DINAlternate-Bold;
    }
  }
  table {
    background-color: #ffffff;
    width: 100%;
    margin-top: 20px;

    tbody {
      tr {
        height: 172px;

        td {
          text-align: center;
        }

        td:nth-child(1) {
          width: 28%;
        }

        td:nth-child(2) {
          width: 15%;
          font-size: 14px;
          color: #1779ff;
        }

        td:nth-child(3) {
          width: 16%;
          font-family: DINAlternate-Bold;
          color: #222222;
          font-size: 16px;
        }

        td:nth-child(4) {
          width: 25%;
        }

        td:nth-child(5) {
          width: 16%;
        }

        .topic {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          .mlogoBox {
            width: 91px;
            height: 80px;
            margin-left: 28px;
            overflow: hidden;
            position: relative;

            img:nth-child(1) {
              width: 80px;
              height: 80px;
              border-radius: 20px;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;
              border: 1px solid #e5e5e5;
            }

            img:nth-child(2) {
              position: absolute;
              right: 0;
              top: 8px;
              width: 64px;
              height: 64px;
            }
          }

          .musicTitle {
            flex: 1;

            p {
              text-align: left;
              padding-left: 22px;
            }

            p:nth-child(1) {
              font-size: 16px;
              color: #222222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            p:nth-child(2) {
              font-size: 14px;
              color: #888888;
              padding-top: 14px;

              span {
                font-weight: 600;
                color: #222222;
              }
            }
          }
        }

        .topVideo {
          width: 69%;
          min-width: 280px;
          margin: 0 auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .videoImgBox {
            width: 80px;
            height: 116px;
            border-radius: 4px;
            position: relative;
            margin-left: 20px;

            .likeImg {
              width: 20px;
              height: 20px;
              position: absolute;
              left: 7px;
              top: 7px;
              display: none;
              cursor: pointer;
              z-index: 2;
            }

            .playImg {
              width: 30px;
              height: 30px;
              position: absolute;
              left: 25px;
              top: 43px;
              display: none;
              cursor: pointer;
              z-index: 2;
            }

            .videoImg {
              width: 100%;
              height: 100%;
              border-radius: 4px;
              border: 1px solid #e5e5e5;
            }

            .zanBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              z-index: 2;
              position: absolute;
              left: 0;
              bottom: 4px;

              img {
                width: 13px;
                height: 12px;
                margin-left: 7px;
              }

              span {
                font-size: 14px;
                color: #ffffff;
                padding-left: 6px;
                font-family: DINAlternate-Bold;
              }
            }
          }

          //   hover 显示收藏和播放
          .videoImgBox:hover {
            .likeImg {
              display: block !important;
            }

            .playImg {
              display: block !important;
            }
          }

          .videoImgBox:nth-child(1) {
            margin-left: 0 !important;
          }
        }

        .options {
          padding: 0 10px;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 32px;
            height: 32px;
            cursor: pointer;
            outline: none !important;
          }

          img:nth-child(2),
          img:nth-child(3) {
            margin-left: 16px;
          }
        }
      }
    }

    th:nth-child(1) {
      text-align: left;
      padding-left: 28px;
    }
  }

  .updateTime {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 31px;
    right: 21px;

    span:nth-child(1) {
      font-size: 14px;
      line-height: 30px;
      color: #888888;
    }

    span:nth-child(2) {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      line-height: 30px;
      color: #1779ff;
      padding-left: 13px;
    }
  }

  .topicDetailsBox {
    background-color: #ffffff;
    border-radius: 4px;
    height: 85vh;
    overflow: auto;
    // min-width: 804px;
    // min-width: 1200px;
  }

  .closeImg {
    cursor: pointer;
    position: absolute;
    width: 22px;
    height: 22px;
    right: -30px;
    top: -12px;
  }
  .loading {
    background-color: #f1f1f1 !important;
  }
}
</style>